import React, { useCallback } from 'react'
import Taro from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import { GoodsITF } from '@INTERFACES/Goods'
import ModuleTitle from '@COMPONENTS/ModuleTitle'
import { Analytic_Type } from '@CONSTANTS/analytic'
import { openPage } from '@UTILS/common'
import { STORE_ROUTER_DATA } from '@CONSTANTS/common'
import GoodsItem from '@COMPONENTS/Goods/GoodsItem'
import style from './MoreGoods.module.scss'

interface Props {
  data: GoodsITF[];
  contentClass?: string;
}

const MoreGoods: React.FC<Props> = ({
  data, contentClass,
}) => {
  const language = 'zh'
  const onClickMore = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.num_pain_store.eventId)
    openPage('wmpRoute', STORE_ROUTER_DATA)
  }, [])
  const isArray = Array.isArray(data)
  if (!isArray || data.length < 1) return null
  const isOne = data.length === 1
  return (
    <View className={style.container}>
      <ModuleTitle
        title="疼爱商城"
        subTitle="大家都在买的精选好物"
        showMore
        onClickMore={onClickMore}
        containerClass={style.containerClass}
      />
      <View className={style.scrollView}>
        <View className={style.leftLinear} />
        <View className={style.rightLinear} />
        {
          isOne ? (
            <View className={style.oneItem}>
              <GoodsItem
                data={data[0]}
                language={language}
                containerClass={style.itemContainer}
                eventId={Analytic_Type.tap_pain_store_good.eventId}
                eventParams={{ goodId: data[0].p8Id }}
              />
            </View>
          ) : (
            <ScrollView scrollX scrollWithAnimation className={style.scrollViewContent}>
              {
                data.map((item, index) => (
                  <View key={`${item.p8Id}_${index}`} className={style.item}>
                    <GoodsItem
                      data={item}
                      language={language}
                      containerClass={style.itemContainer}
                      itemClass={style.itemClass}
                      eventId={Analytic_Type.tap_pain_store_good.eventId}
                      eventParams={{ goodId: item.p8Id }}
                    />
                  </View>
                ))
              }
            </ScrollView>
          )
        }
      </View>
    </View>
  )
}

export default MoreGoods
